<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>大数据融合与挖掘分析平台</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <link href="/css/common.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/nav.css">
    <link rel="stylesheet" type="text/css" href="/css/iconfont.css">
    <link href="/css/bootstrap.min.css" title="" rel="stylesheet" />
    <link title="" href="/css/body.css" rel="stylesheet" type="text/css" />
    <link title="" href="/css/style.css" rel="stylesheet" type="text/css" />
    <link title="blue" href="/css/dermadefault.css" rel="stylesheet" type="text/css" />
    <link title="green" href="/css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link title="orange" href="/css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link href="/css/templatecss.css" rel="stylesheet" title="" type="text/css" />
    <script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/alert.js"></script>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/js/style.js"></script>
    <!--angular ui--->
    <link rel="stylesheet" title="" type="text/css" href="/css/ui-layout.css" />
    <script src="/js/angular.min.js"></script>
    <script src="/js/ui-layout.js"></script>
</head>
<body>
<!-- 头部导航 -->
<div class="jzy_w_max jzy_h_50 br_12">
    <!--菜单1-->
    <div class="jzy_h_50 br_12 br_11_hove lt top-txt">
        <a class="cr_h_0 fs_14" href="">大数据融合与挖掘分析平台</a>
    </div>


    <!--头像-->
    <div class="jzy_w_50 jzy_h_50 br_12 br_11_hove rt top-txt logo">
        <img class="jzy_boy_18" src="/images/touxiang.jpg" width="36" height="36">

        <!-- 头像下拉菜单 -->

        <div class="jzy_w_270 jzy_h_408 br_h_0 top_nav">
            <!--头像跟用户名-->
            <div class="jzy_w_max jzy_h_50 lt" style="margin-top: 15px"><img class="jzy_boy_18" src="/images/touxiang.jpg" width="36" height="36"></div>
            <div class="jzy_w_max jzy_h_30 lt" style="line-height: 30px; border-bottom: 1px solid #e2e2e2">17812100232</div>
            <!--用户公共操作权限-->
            <div class="jzy_w_250 jzy_h_250 lt" style="padding: 10px">
                <div class="jzy_w_80 jzy_h_80 lt br_h_2_hove">
                    <a>
                        <p class="jzy_h_30"><img src="/images/icon/jbzl.png"></p>基本资料
                    </a>
                </div>
                <div class="jzy_w_80 jzy_h_80 lt br_h_2_hove">
                    <a>
                        <p class="jzy_h_30"><img src="/images/icon/smrz.png"></p>基本资料
                    </a>
                </div>
            </div>
            <!--退出登录-->
            <div class="jzy_w_max jzy_h_42 lt br_h_9" style="background: #f5f5f6; line-height: 45px"><a href="/index">退出平台</a></div>
        </div>
    </div>
    <!--菜单3-->
    <div class="jzy_w_90 jzy_h_50 br_12 br_11_hove rt top-txt">
        <a class="cr_h_0 fs_14">权限设置</a>
        <!-- 头像下拉菜单 -->
        <div class="jzy_w_90 br_h_0 top_nav nav2">
            <p class="p"><a href="">新建权限</a></p>
            <p class="p"><a href="">角色列表</a></p>
        </div>
    </div>
</div>
<!--左侧主导航-->
<div class="jzy_w_180 lt main_height main_left nav" style="background: #333744">
    <div class="nav-top">
        <div id="mini" style="background: #4a5064; text-align: center"><img src="/images/icon/suofang.png" width="20"></div>
    </div>
    <ul>
        <li class="nav-item" id="home">
            <a href="/page/home1"><i class="my-icon nav-icon"></i><span>首页</span></a>
        </li>
        <li class="nav-item" id="ronghe1">
            <a href="javascript:;" style="background: #4d58cd"><i class="my-icon nav-icon"></i><span>数据融合及预处理模块</span></a>
        </li>
        <li class="nav-item" id="ronghe2">
            <a href="" style="background: #5f638f"><i class="my-icon nav-icon"></i><span>数据融合算法</span></a>
        </li>
        <li class="nav-item nav-show">
            <a href="javascript:;"><i class="my-icon nav-icon"></i><span>数据聚类</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li class="nav-show"><a href="/page/Kmeans"><span>k均值(K-means)</span></a></li>
                <li><a href=""><span>层次聚类</span></a></li>
                <li><a href=""><span>高斯混合模型</span></a></li>
                <li><a href=""><span>隐狄利克雷分布</span></a></li>
                <li><a href=""><span>InfoMap</span></a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon"></i><span>数据特征融合算法</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li><a href=""><span>时空卷积神经网络</span></a></li>
                <li><a href=""><span>动态路由</span></a></li>
                <li><a href=""><span>神经协同滤波</span></a></li>
                <li><a href=""><span>Transformer</span></a></li>
            </ul>
        </li>
        <li class="nav-item" id="ronghe">
            <a href="" style="background: #5f638f"><i class="my-icon nav-icon"></i><span>数据预处理技术</span></a>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon"></i><span>数据特征表示学习</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li><a href="/page/feature"><span>Skip-gram</span></a></li>
                <li><a href=""><span>Glove</span></a></li>
                <li><a href=""><span>Node2vec</span></a></li>
                <li><a href=""><span>SDNE</span></a></li>
                <li><a href=""><span>DeepWalk</span></a></li>
                <li><a href=""><span>TF-IDF</span></a></li>
                <li><a href=""><span>PageRank</span></a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon"></i><span>数据降维</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li><a href="/page/PCA"><span>主层分分析(PCA)</span></a></li>
                <li><a href=""><span>核主层分分析(kernal-PCA)</span></a></li>
                <li><a href=""><span>因子分析(FactorAnalysis)</span></a></li>
                <li><a href=""><span>多维缩放</span></a></li>
                <li><a href=""><span>流形学习</span></a></li>
                <li><a href=""><span>变分自编码器</span></a></li>
                <li><a href=""><span>线性判别分析</span></a></li>
            </ul>
        </li>
        <li class="nav-item" id="ronghe3">
            <a href="javascript:;" style="background: #4d58cd"><i class="my-icon nav-icon"></i><span>深度挖掘及演化模块</span></a>
        </li>
        <li class="nav-item" id="wa">
            <a href="javascript:;" style="background: #5f638f"><i class="my-icon nav-icon"></i><span>深度挖掘算法</span><i class="my-icon"></i></a>

        </li>
        <li class="nav-item" id="yanhua">
            <a href="javascript:;" style="background: #5f638f"><i class="my-icon nav-icon"></i><span>深度演化技术</span><i class="my-icon"></i></a>

        </li>
        <li class="nav-item" id="wa1">
            <a href="javascript:;" style="background: #5f638f"><i class="my-icon nav-icon"></i><span>挖掘算法</span><i class="my-icon"></i></a>

        </li>
        <li class="nav-item nav-show">
            <a href="javascript:;"><i class="my-icon nav-icon"></i><span>数据分类</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li class="nav-show"><a href="/page/KNN"><span>k邻近(KNN)</span></a></li>
                <li><a href="/page/LR"><span>逻辑回归(LR)</span></a></li>
                <li><a href="/page/SVM"><span>支持向量机(SVM)</span></a></li>
                <li><a href="/page/modelList"><span>决策树</span></a></li>
                <li><a href="/page/job"><span>贝叶斯</span></a></li>
            </ul>
        </li>
        <li class="nav-item nav-show">
            <a href="javascript:;"><i class="my-icon nav-icon"></i><span>数据回归</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li class="nav-show"><a href="/page/linearRegression"><span>线性回归</span></a></li>
                <li><a href="/page/MCAlgorithm"><span>最小二乘回归</span></a></li>
                <li><a href="/page/MLJoblist"><span>贝叶斯回归</span></a></li>
            </ul>
        </li>

        <li class="nav-item" id="fengxian">
            <a href="javascript:;" style="background: #4d58cd"><i class="my-icon nav-icon"></i><span>风险分析及预警模块</span></a>
        </li>

        <li class="nav-item" id="kg">
            <a href="javascript:;" style="background: #4d58cd"><i class="my-icon nav-icon"></i><span>知识图谱可视化模块</span></a>
        </li>

        <li class="nav-item" id="guanli">
            <a href="javascript:;" style="background: #4d58cd"><i class="my-icon nav-icon"></i><span>数据管理模块</span></a>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon"></i><span>数据库管理</span><i class="my-icon"></i></a>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon"></i><span>文件管理</span><i class="my-icon"></i></a>
        </li>

    </ul>
</div>

<!--主内容框架-->
<div class="main_height main_index lt" style="background: #f2f4f8;">

    <div class="left" style="width:500px !important">
        <div class="main-left width-30" style="margin-top:25px">
            <table class="content" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <input id="lr"  name="role_auth_ids" type="hidden" value="lr">
                    <td class="left-txt"><span class="c-red">*</span>数据：</td>
                    <td>
                        <div id="AUTH-B" style="width:400px">选择数据</div>
                        <!--隐藏域 用于记录已选中的ID号 : 格式为 ,ID,ID,ID,-->
                        <input id="IDa"  name="role_auth_ids" type="hidden" value="">
                    </td>
                </tr>
                <tr>
                    <td class="left-txt"><span class="c-red">*</span>参数：</td>
                    <td><textarea style="width:400px" class="input-text" id="params" type="text" placeholder="例如: arg1=value1,arg2=value2"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <span><input class="Jun-TiJiao" id="exeJob" type="button" value="执行"></span>
                    </td>
                </tr>


                </tbody>
            </table>
        </div>
    </div>
    <div class="right" style="width:1150px !important">
        <div id="container" style="height: 900px;width:900px;"></div>
    </div>
</div>
<!--多功能面板-->
<!--权限列表弹窗-->
<!--遮罩层-->
<div id="mask" class="mask"></div>
<div class="convenient" style="height:200px;max-height: 200px;overflow-y: scroll;">
    <div class="top"><span class="left">模型选择</span><span class="right"><button type="button" id="close">×</button></span></div>
    <!--已选区域-->
    <div id="YXZ">
        <span class="txt">已选区域: </span>
    </div>
    <!--未选区域-->
    <div id="WXZ">
        <span class="txt">可选区域: </span>
        <div id=><a>' + data[i].name + '</a><span>+</span></div>
    </div>
    <!--确认区域-->
    <div id="TJ">
        <span class="txt"></span>
        <span class="right"><input id="anniu-1" class="anniu-1" name="" type="submit" value="确认"></span>
    </div>
</div>
<div id="maska" class="maska"></div>
<div class="convenienta" style="height:200px;max-height: 200px;overflow-y: scroll;">
    <div class="top"><span class="left">数据选择</span><span class="right"><button type="button" id="closea">×</button></span></div>
    <!--已选区域-->
    <div id="YXZa">
        <span class="txt">已选区域: </span>
    </div>
    <!--未选区域-->
    <div id="WXZa">
        <span class="txt">可选区域: </span>

        <div id="2"><a>sterilizedmilk_for_regression</a><span>+</span></div>
        <div id="7"><a>iris</a><span>+</span></div>
        <div id="8"><a>k-means_dataset1</a><span>+</span></div>
        <div id="9"><a>leastsq_dataset1</a><span>+</span></div>
        <div id="10"><a>pca_dataset1</a><span>+</span></div>
        <div id="11"><a>regression_dataset1.csv</a><span>+</span></div>
    </div>
    <!--确认区域-->
    <div id="TJa">
        <span class="txt"></span>
        <span class="right"><input id="anniu-1a" class="anniu-1a" name="" type="submit" value="确认"></span>
    </div>
</div>
<!--弹窗添加或修改内容必备的代码-->
<div id="show">
    <iframe id="popup" name="popup" marginwidth=0 width="100%" frameBorder=0 scrolling=yes></iframe>
</div>
<script type="text/javascript" src="/js/nav.js"></script>
<script src="/js/jump.js"></script>
<script type="text/javascript" th:inline="javascript">
			var layer=null;
			layui.use("layer",function(){
				layer = layui.layer;
			});

            var table;
            layui.use(['form', 'table', 'laydate', 'tree'], function() {
                table= layui.table,
                    form = layui.form,
                    laydate = layui.laydate;
                laydate.render({
                    elem: '#date',
                    type: 'datetime',
                    value: new Date()
                });
            });
			/*<![CDATA[*/
			var uuid = /*[[${uuid}]]*/  null;
			/*]]>*/
            $("#AUTH-B").text('sterilizedmilk_for_regression.csv');
            var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				title: {
					text: '结果对比图',
					textStyle: {
                                color: '#fff'
                            }
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['真实值', '预测值'],
					textStyle: {
                                color: '#fff'
                            }
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: [],
					axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                     }
				},
				yAxis: {
					type: 'value',

					axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                     }
				},
				series: [
					{
						name: '真实值',
						type: 'line',
						stack: '真实值',
						data:[],
						itemStyle : {
                                normal : {
                                    lineStyle:{
                                        color:'red'
                                    }
                                }
                            },
					},
					{
						name: '预测值',
						type: 'line',
						stack: '预测值',
						data: [],
						itemStyle : {
                                normal : {
                                    lineStyle:{
                                        color:'#00FF00'
                                    }
                                }
                            }
					}
				]
			};

			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
			$('#exeJob').on('click',function(){
                var dataset=$("#AUTH-B").text();
                var params=$("#params").val();
                if(uuid==null){
					uuid=$("#ID").val();
				};
                var modelId=uuid;
				$.ajax({
					type: "POST",
					dataType: "json",
					async:false,
					url: "/algorithm.do",
					data:{
						"dataset":dataset,
						"model": "linearregression"
					},
					success: function (response) {
						console.log(response);
						if(response.status==0){
							dataTrue=response.data.data.Truth,
							dataPre=response.data.data.Predict,
							myChart.setOption({
							series: [
									{
										data:dataTrue,
									},
									{
										data: dataPre,
									}
								]
							})

							$("#jobName").val("0.9066666666666666");
						}
					},
					error : function(response) {
						console.log('error');
					}
            	 });
		    });
		</script>
</body>
</html>
